// 品牌商组件
<template>
  <div>
      <div class="top">
        <img :src="brand.list_pic_url" alt="">
        <button @click="show=!show">点击切换</button>
        <transition-group name="animate__animated animate__bounce" 
			enter-active-class="animate__wobble"
			leave-active-class="animate__backOutUp"
            >
            <h1  key="1" v-show="show">{{brand.name}}</h1>
        </transition-group>
        
        <p>{{brand.simple_desc}}</p>
      </div>
  </div>
</template>

<script>
// 导入请求
import {getBrand,getBrandArr} from "@/https/http"
import 'animate.css'
export default {
    
    data() {
        return {
            brand:{},
            show:'false'
        }
    },
    mounted(){
        
        getBrand(this.$route.query).then(res=>{
            console.log(res);
            this.brand = res.data.data.brand
            console.log(this.brand);
        })
        getBrandArr({id:String(1039000),page:1,size:1000}).then(res=>{
            console.log(res);
        })
    }
}
</script>

<style lang='less' scoped>
    .top{
        h1{
            margin: 10px;
        }
        img{
            width: 100%;
        }
        p{
            font-size: 15px;
            padding: 0 20px;
        }
    }
    ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    li{
        text-align: center;
        width: 49%;
        img{
            width: 100%;
        }
        p{
            font-size: 18px;
            margin: 10px;
        }
        span{
            font-size: 20px;
            color: red;
        }
    }
}
</style>